<template>
  <div class="mainDiv">
    <mt-cell >
      <div slot="title">
        您的高考总分为：<b style="margin-right: 15px;">{{userInfo.score_total}}</b> 位次：<b >{{userInfo.rankNum}}</b>
      </div>
    </mt-cell>
    <div class="line"></div>
    <mt-cell >
      <div slot="title">
        您的选考科目为：<b v-for="subject in subjects" style="margin-right: 15px;">{{subject}}</b>
      </div>
    </mt-cell>
     <div class="line"></div>
    <mt-cell >
      <div slot="title">
        您选择的省份为：<b v-for="item in search.provinces" style="margin-right: 15px;line-height: 30px;">{{item}}</b>
      </div>
    </mt-cell>
     <div class="line"></div>

    <mt-cell class=" border-bot" title="相应的范围有："></mt-cell>
    <div class="">
      <mt-cell class=" border-bot h60">
        <div slot="title">
           <div class="col-12">
             <div class="col-tit">学校</div>
             <div  class="col-txt">占比{{schoolRate.toFixed(2)}}%</div>
            </div>
            <div class="col-12 col-num">
              {{majorFit.totalSchool}}所
            </div>
        </div>
      </mt-cell>
      <mt-cell class=" border-bot h60">
        <div slot="title">
          <div class="col-12">
             <div class="col-tit">专业</div>
             <div  class="col-txt">占比{{majorRate.toFixed(2)}}%</div>
            </div>
            <div class="col-12 col-num">
              {{majorFit.totalMajor}}个
            </div>
        </div>
      </mt-cell>
      <mt-cell class=" border-bot h60" >
        <div slot="title">
          <div class="col-12">
             <div class="col-tit">招生计划</div>
             <div  class="col-txt">占比{{peopleRate.toFixed(2)}}%</div>
            </div>
            <div class="col-12 col-num">
              {{majorFit.totalPeople}}个
            </div>
        </div>
      </mt-cell>
    </div>
    <div class="line"></div>

    <div class="feng"  v-for="(grade,index) in grades" >
      <div class="fengIcon">
              <img v-bind:src="grade.icon" width="32" height="32"/>
      </div>
      
      <div slot="title" class="fengTitle" @click="chooseGrade(grade)">
        <div class="fengName">
          <!-- <mt-badge :type="index==0?'error':(index==1?'primary':'success')" class="mr10">{{grade.title}}</mt-badge> -->
          <input type="number" class="myInput" v-model="grade.from" @click.stop v-on:input="getGradeRet(grade)"  maxlength=9 ></input>
           至<input type="number" class="myInput" v-model="grade.to" @click.stop maxlength=9></input>
        </div>
        <div class="alignCenter">
          <!--<span class="fengLabel" :style="{color:}">  </span>-->
          {{grade.gradeRet.totalSchool}}所院校，{{grade.gradeRet.totalMajor}}个志愿推荐
        </div>
        <i class="mint-cell-allow-right"></i>
      </div>
    </div>
  </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "risk",
      data() {
        return {
          search:{},
          grades:[{title:'冲',from:0,to:0,gradeRet:{},icon:require("../../assets/icons/grade4.png")},
            {title:'稳',from:0,to:0,gradeRet:{},icon:require("../../assets/icons/grade5.png")},
            {title:'保',from:0,to:0,gradeRet:{},icon:require("../../assets/icons/grade6.png")}],
          userInfo:{},
          total:{totalPeople:1,totalMajor:1,totalSchool:1}
          ,majorFit:{totalPeople:1,totalMajor:1,totalSchool:1}
        }
      },
      methods:{
        getGradeRet:function(grade){
          let vm = this;
          vm.search.fromRank = grade.from;
          vm.search.toRank = grade.to;
          vm.$http.post("/auth/gradeRet",changeDataType(vm.search)).then(resp=>{
            grade.gradeRet = resp.data;
          })
        },
        chooseGrade:function(grade){
          let vm = this;
          vm.search.title = grade.title;
          vm.search.fromRank = grade.from;
          vm.search.toRank = grade.to;
          window.sessionStorage.setItem(grade.title,JSON.stringify(grade));
          this.$router.push({path:"/student/major", query:vm.search});
        }
      },
      computed:{
        subjects: function(){return this.userInfo.select_subject?this.userInfo.select_subject.split(","):[]},
        schoolRate:function(){return this.majorFit.totalSchool*100/this.total.totalSchool},
        majorRate:function(){return this.majorFit.totalMajor*100/this.total.totalMajor},
        peopleRate:function(){return this.majorFit.totalPeople*100/this.total.totalPeople},
      },
      created(){
        let vm = this;
        checkLogin(this,function(){
          if(vm.userInfo.rankNum){
            let rank = vm.userInfo.rankNum;
            vm.grades.forEach((n,i)=>{
              switch (i) {
                case 0:
                  let cache0 = window.sessionStorage.getItem("冲");
                  if(cache0){
                    let cache = JSON.parse(cache0);
                    n.from = cache.from;n.to= cache.to;
                  }else{
                    n.from =Math.round(rank*0.9);n.to= rank;
                  }
                  break;
                case 1:
                  let cache1 = window.sessionStorage.getItem("稳");
                  if(cache1){
                    let cache = JSON.parse(cache1);
                    n.from = cache.from;n.to= cache.to;
                  }else{
                    n.from =rank+1;n.to= Math.round(rank*1.1);
                  }
                  break;
                case 2:
                  let cache2 = window.sessionStorage.getItem("保");
                  if(cache2){
                    let cache = JSON.parse(cache2);
                    n.from = cache.from;n.to= cache.to;
                  }else{
                    n.from =vm.grades[1].to+1;n.to= Math.round(rank*1.2);
                  }
                  break;
              }
              vm.getGradeRet(n);
            })
          }
        });
      },
      mounted(){
        console.log(this.$route.query.batch);
        let vm = this;
        Object.assign(vm.search, this.$route.query);
        vm.$http.post("/auth/overview",changeDataType(vm.search)).then(resp=>{
          vm.total = resp.data.total;
          vm.majorFit = resp.data.majorFit;
        })
      }
    }
</script>

<style scoped>
  .feng{
    display: flex;
    border-bottom: 1px solid lightgray;
    /* width: 100%; */
    margin: 0 10px;
    white-space: nowrap;

  }
  .fengIcon{
    display: flex;
    align-items: center;
  }
  .fengTitle{
    padding: 10px;
    display: inline-block;
    position: relative;
    width: 90%;
  }
  .fengName{
    font-size: 18px;
    line-height: 30px;
  }
  .fengName .myInput{
    width: 24%;
    padding: 7px;
    text-align: center;
    margin: 7px 23px;
    border: 1px solid #979797;
    border-radius: 4px;
  }
  .fengLabel{
    margin-top: 10px;
    color:lightskyblue;
  }


  /*.cell{
    min-height:80px;
    white-space: nowrap;
  }
  .cellTitle{
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .cellName{
    font-size: 18px;
    line-height: 30px;
  }
  .cellName .myInput{
    width: 20%;
    padding: 5px;
    text-align: center;
    margin: 0 15px;
  }
  .cellLabel{
    margin-top: 10px;
    color:lightskyblue;
  }*/
</style>
